<!-- 商户报表 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true">
    <template #form>
      <el-form-item :label="$t('39')">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" :start-placeholder="$t('26')"
          :end-placeholder="$t('27')" value-format="YYYY-MM-DD" :clearable="false" :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button>
      <el-button type="success" @click="data.isShowExport = true">{{t('839')}}</el-button>
      <el-button type="warning" @click="data.query.is_usdt_show = !data.query.is_usdt_show,getSearchList()">
        {{ data.query.is_usdt_show ? t('972') :t('971') }}</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'total_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.total_bet) }}</span>
          </template>
          <template v-if="item.prop == 'total_game_income'" #default="scope">
            <span :class="colorClass(scope.row.total_game_income)">{{ BigWan(scope.row.total_game_income) }}</span>
          </template>
          <template v-if="item.prop == 'share_due'" #default="scope">
            <span :class="colorClass(scope.row.share_due)">{{ scope.row.share_due }}</span>
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 导出 -->
  <PdfExport ref="PdfExportRef" :title="'OMG'+t('856')" :show="data.isShowExport" @onHideDetails="onHideDetails"/>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed, watch } from 'vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import PdfExport from '@/components/PdfExport.vue'
import { getMerchantReport } from '@/api/report'
import { setTimeValue, getMonth } from '@/utils/time'
import { BigWan, BigTimes, BigHundred, BigDiv, BigTofixedFour } from '@/utils/math'
import { colorClass, ArrayReduce } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    date: getMonth(0),
    is_usdt_show:false
  },
  list: [],
  total: 0,
  fields: [
    { label: t('39'), prop: 'date', width: '200', visible: true, tips: t('300') },
    { label: t('76'), prop: 'total_bet', width: '', visible: true, tips: t('322') },
    { label: t('697'), prop: 'total_game_income', width: '', visible: true, tips: t('323') },
    { label: t('470'), prop: 'share_due', width: '', visible: true, tips: t('471') },
  ],
  dialogVisible: false,
  isShowExport: false
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getMerchantReport(data.query),exchange = JSON.parse(localStorage.getItem('userInfo') as string).usdt_exchange_rate;
  res.data.list?.forEach((item: any) => {
    item.date = data.query.date[0]+' ~ '+data.query.date[1]
    let arrNum: any[]=[],keys=Object.keys(item.platform_ggr?item.platform_ggr:[]);
    keys.forEach((key:string)=>{
      arrNum.push(BigWan(item.platform_ggr[key]))
    })
    item.share_due = BigTofixedFour(ArrayReduce(arrNum))
    // USDT换算
    if(data.query.is_usdt_show){
      item.total_bet = BigTimes(item.total_bet,exchange)
      item.total_win = BigTimes(item.total_win,exchange)
      item.share_due = BigTimes(item.share_due,exchange)
    }
  })
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

const onHideDetails = (show: boolean) => {
  data.isShowExport = false
}
</script>
<style scoped lang="scss"></style>